import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import * as React from "react";
import { useEffect } from "react";
import { Avatar, Card, Col, Row } from "antd";
import { RouteComponentProps } from "react-router";
import { Hos } from "../../type/CommonData";

const styles = (theme: Theme) =>
  createStyles<
    | "root"
    | "menubg"
    | "leftContent"
    | "card"
    | "cardButtom"
    | "hosGrade"
    | "container"
    | "images"
  >({
    root: {},
    menubg: {
      borderRadius: "5px",
      marginTop: "10px",
      padding: 10,
      backgroundColor: "rgb(255,255,255)",
      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.09)",
      borderColor: "rgba(0, 0, 0, 0.09)",
      "& li:after": {
        border: "0px"
      }
    },
    leftContent: {
      margin: "10px 0 0 20px"
    },
    card: {
      display: "flex",
      justifyContent: "center",
      flexDirection: "column",
      alignItems: "center",
      "& .avatar-middle": {
        margin: "20px 0 5px 0",
        fontSize: 14,
        fontWeight: "bold",
        "& span": {
          marginLeft: 10
        }
      },
      "& button": {
        marginTop: 20,
        borderColor: "#fece3e",
        color: "#fece3e"
      }
    },
    cardButtom: {
      display: "flex",
      "& div": {
        flex: 1
      }
    },
    hosGrade: {
      fontSize: "4px",
      marginRight: "10px",
      backgroundColor: "rgb(254,244,215)",
      color: "rgb(254,144,9)",
      borderRadius: "5px",
      padding: "3px"
    },
    container: {
      textIndent: "2em"
    },
    images: {
      width: 200,
      padding:20
    }
  });

interface Iprops extends WithStyles<typeof styles>, RouteComponentProps<any> {}

/**
 * 描述：
 *  医院详情
 * @author sunshixiong
 * @date 2019/3/28-15:58
 */
const DetailHospital = (props: Iprops) => {
  useEffect(() => {
    if (!props.location.state) {
      props.history.replace("/medical-resource/hospital");
    }
  }, []);
  const data: Hos = props.location.state || {};
  return (
    <Row type={"flex"} justify={"center"} className={props.classes.root}>
      <Col span={18}>
        <Row>
          <Col span={4}>
            <div className={props.classes.menubg}>
              <div className={props.classes.card}>
                <Avatar
                  size={100}
                  src={
                    data.detail &&
                    data.detail.images &&
                    data.detail.images[0] &&
                    data.detail.images[0].url
                      ? data.detail.images[0].url
                      : ""
                  }
                />
                <div className={"avatar-middle"}>{data.name}</div>
                <span>
                  <span className={props.classes.hosGrade}>
                    {data.level}
                    {data.category}
                  </span>
                  <span className={props.classes.hosGrade}>{"综合医院"}</span>
                </span>
              </div>
              <div style={{ padding: 20 }}>
                <div className={props.classes.cardButtom}>
                  <span>
                    {"成立时间："}
                    {data.detail && data.detail.establishDate
                      ? data.detail.establishDate
                      : ""}
                  </span>
                </div>
                <div className={props.classes.cardButtom}>
                  <span>{"联系电话："}</span>
                  <div>{data.phone}</div>
                </div>
                <div className={props.classes.cardButtom}>
                  <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</span>
                  <div>{data.location}</div>
                </div>
              </div>
            </div>
          </Col>
          <Col span={20}>
            <div className={props.classes.leftContent}>
              <Card hoverable={true}>
                <div>
                  <h1>{data.name}</h1>
                  <h2>概况</h2>
                  <div className={props.classes.container}>
                    {data.introduction}
                  </div>
                  <h2>特色科室</h2>
                  {data.detail && data.detail.specialUnits
                    ? data.detail.specialUnits.map(value => (
                        <div className={props.classes.container}>{value}</div>
                      ))
                    : ""}
                  {data.detail && data.detail.medicineTeam
                    ? [
                        <h2 key={"12"}>医护团队</h2>,
                        <div key={"23"} className={props.classes.container}>
                          {data.detail.medicineTeam}
                        </div>
                      ]
                    : ""}
                  {data.detail && data.detail.images ? (
                    <div>
                      <h2>医院风采</h2>
                      {data.detail.images.map(value => (
                        <img className={props.classes.images} src={value.url} />
                      ))}
                    </div>
                  ) : (
                    ""
                  )}
                </div>
              </Card>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default withStyles(styles)(DetailHospital);
